<template>
  <div class="gradient-background">
    <div class="shell">
      <!-- 图片部分 -->
      <div id="img-box">
        <img :src="require('@/assets/login-image.png')" alt="" />
      </div>
      <!-- 登录框部分 -->
      <form action="" method="post" @submit.prevent="handleLogin" class="form">
        <div id="form-body">
          <div id="welcome-lines">
            <div id="w-line-1">Welcome to my shopping website</div>
          </div>
          <div id="input-area">
            <div class="f-inp">
              <input
                type="text"
                placeholder="账号"
                id="username"
                v-model="username"
                required
              />
            </div>
            <div class="f-inp">
              <input
                type="password"
                placeholder="密码"
                id="password"
                v-model="password"
                required
              />
            </div>
            <template>
              <el-select v-model="loginIdentity" placeholder="请选择登录身份">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </div>
          <div id="submit-button-cvr">
            <button type="submit" id="submit-button">登录</button>
          </div>
          <div id="register-pass">
            <a href="/register">没有账号？请点击这里注册</a>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      username: '',
      password: '',
      errorMessage: '',
      options: [
        {
          value: 1,
          label: '顾客',
        },
        {
          value: 2,
          label: '销售管理',
        },
      ],
      loginIdentity: '',
    }
  },
  methods: {
    async handleLogin() {
      try {
        let response
        // 登录 API 选择
        if (this.loginIdentity === 1) {
          // 调用顾客登录 API
          response = await this.$http.post('/api/login/user', {
            username: this.username,
            password: this.password,
          })
        } else if (this.loginIdentity === 2) {
          // 调用销售管理登录 API
          response = await this.$http.post('/api/login/admin', {
            username: this.username,
            password: this.password,
          })
        }

        // 检查返回的 JWT 令牌
        if (response.data.code) {
          const token = response.data.data // 假设返回的数据结构中包含 token
          console.log('返回的JWT令牌为：' + token)
          localStorage.setItem('jwtToken', token) // 存储 JWT 到 localStorage

          // 根据角色信息进行跳转
          if (this.loginIdentity === 1) {
            this.$router.push('/home') // 登录成功后跳转到主页
          } else if (this.loginIdentity === 2) {
            this.$router.push('/adminhomeproduct') // 登录成功后跳转到管理主页
          }
        } else {
          alert(response.data.msg)
        }
      } catch (error) {
        console.error(error)
        this.errorMessage = 'An error occurred during login.'
      }
    },
  },
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  outline: none;
}

.gradient-background {
  background: linear-gradient(135deg, #ff7e5f, #ffbb87);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.shell {
  display: flex;
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
}

.shell form {
  position: relative;
}

.form {
  width: 562px;
  height: 520px;
  background-color: #fff;
  box-shadow: 15px 15px 40px #b46d37;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#img-box {
  width: 330px;
  height: 520px;
}

#img-box img {
  height: 100%;
  border-radius: 15px;
}

#form-body {
  width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#welcome-lines {
  width: 100%;
  text-align: center;
  line-height: 1;
}

#w-line-1 {
  color: #4f4f4f;
  font-size: 40px;
}

#input-area {
  width: 100%;
  margin-top: 40px;
}

.f-inp {
  padding: 12px 25px;
  border: 2px solid #6e6d6d;
  line-height: 1;
  border-radius: 20px;
  margin-bottom: 15px;
}

.f-inp input {
  width: 100%;
  font-size: 14px;
  padding: 0;
  margin: 0;
  border: 0;
}

.f-inp input::placeholder {
  color: #b9b9b9;
}

#submit-button-cvr {
  margin-top: 20px;
}

#submit-button {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 14px;
  margin: 0;
  padding: 14px 40px;
  border: 0;
  background-color: #f5506e;
  border-radius: 25px;
  line-height: 1;
  cursor: pointer;
}

#register-pass {
  text-align: center;
  margin-top: 10px;
}

#register-pass a {
  color: #6e6d6d;
  font-size: 12px;
  text-decoration: none;
}
</style>
